<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环形进度倒计时</title>
    <style>
        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #1a1a1a;
            font-family: 'Arial', sans-serif;
        }

        .countdown-container {
            text-align: center;
            position: relative;
        }

        .title {
            color: #fff;
            margin-bottom: 2rem;
            font-size: 2em;
        }

        .circles-container {
            display: flex;
            gap: 30px;
            justify-content: center;
        }

        .circle-unit {
            position: relative;
            width: 150px;
            height: 150px;
        }

        .circle-bg {
            fill: none;
            stroke: #2a2a2a;
            stroke-width: 10;
        }

        .circle-progress {
            fill: none;
            stroke: #00a8ff;
            stroke-width: 10;
            stroke-linecap: round;
            transform: rotate(-90deg);
            transform-origin: center;
            transition: stroke-dashoffset 0.3s;
        }

        .circle-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: #fff;
        }

        .number {
            font-size: 2em;
            font-weight: bold;
            margin: 0;
        }

        .label {
            font-size: 1em;
            opacity: 0.7;
            margin: 5px 0 0;
        }

        /* 渐变效果 */
        .days .circle-progress { stroke: #ff6b6b; }
        .hours .circle-progress { stroke: #4ecdc4; }
        .minutes .circle-progress { stroke: #45b7d1; }
        .seconds .circle-progress { stroke: #96c93d; }

        /* 发光效果 */
        .circle-progress {
            filter: drop-shadow(0 0 5px currentColor);
        }
    </style>
</head>
<body>
    <div class="countdown-container">
        <h1 class="title">2025年春节倒计时</h1>
        <div class="circles-container">
            <div class="circle-unit days">
                <svg width="150" height="150" viewBox="0 0 150 150">
                    <circle class="circle-bg" cx="75" cy="75" r="65"/>
                    <circle class="circle-progress" cx="75" cy="75" r="65"/>
                </svg>
                <div class="circle-text">
                    <p class="number" id="days">0</p>
                    <p class="label">天</p>
                </div>
            </div>
            <div class="circle-unit hours">
                <svg width="150" height="150" viewBox="0 0 150 150">
                    <circle class="circle-bg" cx="75" cy="75" r="65"/>
                    <circle class="circle-progress" cx="75" cy="75" r="65"/>
                </svg>
                <div class="circle-text">
                    <p class="number" id="hours">0</p>
                    <p class="label">时</p>
                </div>
            </div>
            <div class="circle-unit minutes">
                <svg width="150" height="150" viewBox="0 0 150 150">
                    <circle class="circle-bg" cx="75" cy="75" r="65"/>
                    <circle class="circle-progress" cx="75" cy="75" r="65"/>
                </svg>
                <div class="circle-text">
                    <p class="number" id="minutes">0</p>
                    <p class="label">分</p>
                </div>
            </div>
            <div class="circle-unit seconds">
                <svg width="150" height="150" viewBox="0 0 150 150">
                    <circle class="circle-bg" cx="75" cy="75" r="65"/>
                    <circle class="circle-progress" cx="75" cy="75" r="65"/>
                </svg>
                <div class="circle-text">
                    <p class="number" id="seconds">0</p>
                    <p class="label">秒</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 设置圆环进度条的周长
        const circles = document.querySelectorAll('.circle-progress');
        const circumference = 2 * Math.PI * 65;
        circles.forEach(circle => {
            circle.style.strokeDasharray = circumference;
            circle.style.strokeDashoffset = 0;
        });

        function setProgress(element, current, max) {
            const offset = circumference - (current / max) * circumference;
            element.style.strokeDashoffset = offset;
        }

        function updateCountdown() {
            const targetDate = new Date('2026-02-17T00:00:00'); // 2026年春节
            const now = new Date();
            const diff = targetDate - now;

            if (diff <= 0) {
                document.querySelector('.title').textContent = '新年快乐！';
                return;
            }

            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);

            // 更新数字
            document.getElementById('days').textContent = days;
            document.getElementById('hours').textContent = hours;
            document.getElementById('minutes').textContent = minutes;
            document.getElementById('seconds').textContent = seconds;

            // 更新圆环进度
            setProgress(document.querySelector('.days .circle-progress'), days, 365);
            setProgress(document.querySelector('.hours .circle-progress'), hours, 24);
            setProgress(document.querySelector('.minutes .circle-progress'), minutes, 60);
            setProgress(document.querySelector('.seconds .circle-progress'), seconds, 60);
        }

        // 初始更新
        updateCountdown();
        // 每秒更新一次
        setInterval(updateCountdown, 1000);
    </script>
</body>
</html>
